<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="style/js/jquery-1.11.0.min.js"></script>
		<script type="text/javascript" src="style/js/echarts.js" ></script>
		<style>
			#main{
	width: 100%;
	height: 400px;
	line-height: 400px;
	margin: 0 auto;
	align-content: center;
	margin-top: 30px;
}
		</style>
		<script>
			$(function(){
				var url="http://192.168.11.130:10001/V1/app/page/allName";
				$.ajax({
					type:"get",
					url:url,
					dataType:'jsonp',
					processData:false,
					success:function(data){
						var dataName=[];
						var dataNum=[];
			var list=data.data.ArrayList;
			console.log(list);
			for(var i=0;i<list.length;i++){
			//	console.log(list[i].pageName);
				var pageName=list[i].pageName;
				var showNum=list[i].showNum;
				dataName.push(pageName);
				dataNum.push(showNum);
			}
			var myChart = echarts.init(document.getElementById('main'));
			var option = {
		    title: {
		        text: '页面加载数据',
		        //subtext: '数据来自网络'
		    },
		    tooltip: {
		        trigger: 'axis',
		        axisPointer: {
		            type: 'shadow'
		        }
		    },
		    legend: {
		        data: ['加载次数(次)', '加载时间(毫秒)']
		    },
		    grid: {
		    	    top: '12%',
		        left: '3%',
		        right: '10%',
		        containLabel: true
		    },
		        xAxis: [
		            {
		                type : 'category',
		            data:dataName
		            }
		        ],
		        yAxis: [
		            {
		                type : 'value',
		              //  name : '网络加载',
		            }
		        ],
		    series: [
		        {
		            name: '加载次数(次)',
		            type: 'bar',
		           // barWidth: 10,
		         data:dataNum
		        },

		    ],
					    dataZoom: [
					 {
		                type: 'slider',
		                show: true,
		                start: 1,
		                end: 100,
		                handleSize: 20
		            },
		            {
		                type: 'inside',
		                start: 1,
		                end: 100
		            },
		            {
		                type: 'slider',
		                show: true,
		                yAxisIndex: 0,
		                filterMode: 'empty',
		                width: 30,
		                height: '70%',
		                handleSize: 20,
		                showDataShadow: false,
		                left: '93%'
		            }
		
					],
									toolbox: {
					show: true,
					orient: 'horizontal',
					showTitle: true,
					right: 50,
					feature: {
						dataView: {
							show: true,
						},
						saveAsImage: {
							show: true,
						},
						magicType: {
							type: ['line', 'bar', 'stack', 'tiled']
						},
						restore :{
							show: true
						}
					}

				}
			};
		
					myChart.setOption(option);
					}
				});
			});
		</script>
	</head>
	<body>
		<div id="main">
			
		</div>
		
	</body>
</html>
